<template>
  <div id="app"  >  
    <div  style="background-color: #fff;top:0;width: 100%;z-index:9;"  :style='{position:headerFixed==true ? "fixed":"absolute"} '>
        <div class=' header  clear' > 
            <router-link  to='/index'  class=' fl pt12'>
              
              <img  src='static/img/home/logo-jinbo.png' class=' vertical-middle' alt='金帛云 资产易' width='250'>
            </router-link>
            
            <ul  class='fr nav' >
                <li  v-for='(item,index) in navItem'  :key='index'>
                  <router-link  class='inline-block navItem'  :to=item.to  v-if='item.to!=null' >{{item.title}}</router-link>
                  <div  v-else>
                      <div class='cursor  pr20  pt20'  @click='commitLogin()'  v-if='token==null'>
                        <img  src='static/img/home/user-default.png' class='align-text-top  mr8'  width="26">
                        <span  class="color-main  ft18">登录</span> 
                      </div>
                      <a-dropdown  v-else>
                          <span  class='inline-block'><img  src='static/img/home/user.png' class=' mr8'  style="height: 16px;vertical-align: baseline;">我的</span> 
                          <a-menu slot="overlay">
                              <a-menu-item>
                                <a href="javascript:;"  @click='loginOut()'><a-icon type="poweroff" />  退出登录</a>
                              </a-menu-item>
                               
                          </a-menu>
                      </a-dropdown>
                  </div>
                </li>   
              </ul>
        </div>
    </div>
    <div  style="background-color:#F6F6F6;" >
        <breadcrumbs></breadcrumbs>
        <router-view/>
    </div>
    <div  class='footer absolute'>
      <div  class='footer-content  clear'>
          <div  class='fl mt50  down'>
              <span class='pr30'><router-link to='/about'>关于我们</router-link></span>
              <span class='pr30'><router-link to='/currentSell'>在售产品</router-link></span>       
              <span class='pr30'><router-link to='/property'>可推荐资产</router-link></span>        
              <span class='pr30'><router-link to='/release'>发布信息合作</router-link></span>
              <span class='pr30'>企业邮箱</span>    
          </div>
          <div  class='fr  mt50  relative'>
             
              <span  class='pb20  '>联系我们</span><br/>
              <span  class='pb20  lh-380'>0571-89996201</span><br/>
              杭州市江干区华润大厦B座2601  
              <img  src='static/img/home/logo-mini.png' class=' mr20 vertical-middle  absolute' style="top:0;right:-100px;" alt='铭帛科技' width='68'>
          </div>
          &copy;沪ICP备19016632号
      </div>
    </div>
    <a-back-top />
    <a-modal  :width='700' centered
        :visible="login_visible" 
        footer=''
        @cancel='cancel_login'  >
        <div class='clear'  style="padding: 0 20px;">
            <img  src='static/img/home/login-bg.png' alt='铭帛科技'  class='fl  mt28  mb28' width="320" height="300" />
            <div  class='fr  text-center'  style="width: 240px">
                <img  src='static/img/home/logo-bl.png'  width="68">
                <img  src='static/img/home/logo-jinbo.png'  width="200"  class='mt12'>
                <a-form  :form="form" class="login-form  mt28" @submit="handleSubmit">
                    <a-form-item >
                        <a-input
                          v-decorator="[
                            'loginName',
                            { rules: [{ required: true, message: '请输入用户名!' }] },
                          ]"
                          placeholder="用户名"
                        >
                          <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)" />
                        </a-input>
                       
                    </a-form-item>
                    <a-form-item>
                         <a-input  type='password'
                          v-decorator="[
                            'password',
                            { rules: [{ required: true, message: '请输入密码!' }] },
                          ]"
                          placeholder="密码"
                        >
                          <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)" /> 
                        </a-input>
                    </a-form-item> 
                    <a-form-item>
                        <a-button  :loading='btnLoading'  type="primary" html-type="submit" class="mt32 w-100 ft18" >
                          登录 
                        </a-button>
                    </a-form-item>
                </a-form>
                
            </div>
        </div>
    </a-modal>
  </div>
</template>

<script>
  import  { loginUser }  from  '@/api/home/index'
  import { mapGetters }  from 'vuex'
  import breadcrumbs  from '@/components/common/breadcrumbs'
export default {
  name: 'App', 
  data(){
    return {
      // visible:false, 
      btnLoading:false,//登录按钮 加载效果
      loginShow:sessionStorage.getItem('token')==null ? true:false,
      navItem:[
        { to:'/index',title:'首页'},
        { to:'/currentSell',title:'在售产品推荐'},
        { to:'/property',title:'可推荐资产'},
        { to:'/release',title:'发布合作信息'}, 
        { to:null,title:'我的'}, 
      ], 
      headerFixed:false,

    }
  },
  beforeCreate () {
    this.form = this.$form.createForm(this);
  },
  created(){

    // this.loginShow = sessionStorage.getItem('token')==null ? true:false
    // console.log(this.loginShow)
  }, 
  methods:{
    handleOk(){

    },
    handleCancel(){

    },
    handleSubmit(e) {
        let that = this
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
            this.btnLoading = true
            loginUser(values).then((res)=>{
               that.$message.success('登录成功')

               sessionStorage.setItem('token', res.data.token)
               sessionStorage.setItem('tokenId', res.data.tokenId)
               sessionStorage.setItem('username', res.data.username)

               // console.log(that.$store)
               that.$store.commit("setusername",res.data.username)
               that.$store.commit("settoken",res.data.token)

               that.loginShow = false //头部导航 未登录===》登录
               that.btnLoading = false
               this.$store.commit("setlogin_visible",false)
               // console.log(this.$route)
               that.$router.push('/index') 
                
               
            })
            .catch(error=>{
                this.btnLoading = false
            })
          }
        });
    },
    // 登录框显示
    commitLogin(){
      this.$store.commit("setlogin_visible",true)
    },
    // 取消登录
    cancel_login(){
      this.$store.commit("setlogin_visible",false)
    },  
    loginOut(){
        sessionStorage.clear()
        this.$store.commit("setusername",'')
        this.$store.commit("settoken",null)
        this.$store.commit("setbreadcrumbItems",[])
        console.log(this.$route)
        this.$router.push('/index')
    }, 
    handleScroll(){
      // console.log(  document.documentElement.scrollTop) 
      this.headerFixed = document.documentElement.scrollTop < 68 ? false:true
       
    }
    
  },
  mounted(){
    this.$nextTick(function () { 
      window.addEventListener('scroll', this.handleScroll);  
    });
  },
  computed:{
    ...mapGetters(['token','login_visible'])
  },
  components:{
    breadcrumbs
  }
}
</script>

<style>
@import "./assets/css/public.css";
  html{
    min-height: 100%
  }
  body{
    margin:0;
    height: auto;
    min-height: 100%;
    position: relative;
    background: #F6F6F6;
  }
#app {
  font-family: MicrosoftYaHei, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /*text-align: center;*/
  padding-top:68px;
  padding-bottom:184px;
  color: #333;  
  min-height: 100%;
}
.header{width:1200px;height: 68px;z-index:9;margin:0 auto;}
.footer{width:100%;height: 184px;bottom:0;background-color: #232935;color:#fff;}
.footer-content{width: 1200px;margin:0 auto;}
.footer .down span:hover{color: #008CD6;cursor: pointer;}

/*导航*/
.nav{line-height: 64px;}
.nav li{display: inline-block;margin-right: 30px;font-size: 18px;position: relative;}
.nav li:hover{color:#1E49A5;cursor: pointer;}
/*导航active*/
.router-link-active.navItem{border-bottom: 4px solid #1E49A5;color:#1E49A5;}


.ant-checkbox-group-item{color:#fff;}


@media(max-width: 1250px){
  .header{width: 700px;/*margin-left: -350px;*/}
  .footer-content{width: 700px;}
  .footer .down span{float: left;clear:both;line-height: 2;}
}
@media(max-width: 776px){
  .header{width: 100%;/*margin-left: -50%*/}
  .footer-content{width:100%;padding:0 20px ;}
}
</style>
